<template>
  <el-dialog  title="搜索条件11" :visible.sync="show" width="35%" @close="close">
    <div style="margin-bottom: 10px"><el-button @click="search" size="mini" type="primary">搜索</el-button><el-button @click="clearConditions" size="mini" type="danger">清除</el-button></div>

    <el-row v-for="(item,index) of conditions" :key="index">
      <!-- <el-col :span="3"><el-checkbox v-model="conditions[index].checked"></el-checkbox></el-col> -->
      <el-checkbox @click.stop.native v-model="item.checked" name="type"  class="search-checkbox"></el-checkbox>
      <el-col :span="5">{{item.label}}</el-col>
      <el-col :span="16">
        <el-radio-group  v-if="item.type == 'radio'" v-model="conditions[index].value" @change="inputChange(index)">
            <el-radio
                v-for="item in conditions[index].radioColumns"
                :key="item.label"
                :value="item.value"
                :label="item.label"
                style="display:inline"
            >{{item.label}}
            </el-radio>
        </el-radio-group>
        <el-input v-if="item.type == 'text'" size='mini' v-model="conditions[index].value" @input="inputChange(index)" :placeholder="conditions[index].placeholder"></el-input>
        <el-input v-if="item.type == 'search'" size='mini' :readonly="true" v-model="conditions[index].proxy" @input="inputChange(index)">
          <el-button slot="append" icon="el-icon-search" @click="outSearch(index)"></el-button>
        </el-input>
        <el-input v-if="item.type == 'search'" type="hidden" v-model="conditions[index].value" style="display: unset"/>
        <el-checkbox v-if="item.type == 'checkbox' && item.trueLabel" v-model="conditions[index].value" true-label="是" false-label="否" @change="checkChange(index)"></el-checkbox>
        <el-checkbox v-if="item.type == 'checkbox' && !item.trueLabel" v-model="conditions[index].value"> </el-checkbox>
        <el-date-picker
          type="date" v-if="item.type == 'date'"
          format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          v-model="conditions[index].value" @change="inputChange(index)"
          placeholder="选择日期" ></el-date-picker>
      </el-col>
    </el-row>
    <search-list-pop-up v-for="(item,index) of outSearchs" :key="'list-pop'+index" :props="item" @outClose="outClose"></search-list-pop-up>
  </el-dialog>
</template>

<script>
  import SearchListPopUp from "./SearchListPopUp";
  export default {
      name:'searchPopUp',
      props:{
          props:Array,
          outBtn:Object,
          outConditions:Array
      },
      data(){
          return{
              show:false,
              conditions:this.outConditions,
              outSearchs:[],
          }
      },
      mounted() {
      },
      methods:{
          close() {
              this.$emit("close",null)
          },
          conditionChange() {
            console.log(this.conditions, 'this.conditionsthis.conditionsthis.conditions');
              this.$emit("conditionChange",this.conditions)
          },
          setConditions() {
            // console.log(this.outConditions, 789789);
              if (!this.outConditions || this.outConditions.length ==0) {
                  for (let i=0;i<this.props.length;i++) {
                      if (this.props[i].search) {
                          let condition = {checked:false,prop:this.props[i].prop,label:this.props[i].label1?this.props[i].label1:this.props[i].label,value:'',type:this.props[i].type,queryProp:this.props[i].queryProp,placeholder:this.props[i].placeholder}
                          if (this.props[i].type=='search'){
                              condition.columns = this.props[i].columns
                              condition.searchUrl = this.props[i].searchUrl
                              condition.searchLabel = this.props[i].searchLabel
                              condition.searchProxy = this.props[i].searchProxy
                              condition.searchValue = this.props[i].searchValue
                          }
                          if (this.props[i].type == 'checkbox') {
                              condition.value = false
                              condition.trueLabel = this.props[i].trueLabel
                              condition.falseLabel = this.props[i].falseLabel
                          }
                          if (this.props[i].type == 'radio') {
                              condition.radioColumns = this.props[i].radioColumns
                              condition.searchValue = this.props[i].value
                          }
                          this.conditions.push(condition)
                      }
                  }
              }
              // console.log(this.conditions, 'conditionsconditions');
          },
          clearConditions() {
              for (let i=0;i<this.conditions.length;i++) {
                  this.conditions[i].value = ''
                  this.conditions[i].checked = false
                  this.conditions[i].proxy = ''
              }
          },
          search() {
             this.conditionChange()
             this.close()
          },
          inputChange(index) {
              if (this.conditions[index].value) {
                  this.conditions[index].checked = true
              } else {
                  this.conditions[index].checked = false
              }
          },
          checkChange(index) {
              if (this.conditions[index].value) {
                  this.conditions[index].checked = true
              } else {
                  this.conditions[index].checked = false
              }
          },
          outSearch(index) {
              // this.$emit("outSearch",item)
              this.outSearchs.push(this.conditions[index])
              this.conditions[index].callback=(item)=>{
                  this.conditions[index].proxy=item[this.conditions[index].searchProxy]
                  this.conditions[index].value=item[this.conditions[index].searchValue]
                  this.conditions[index].checked= true
              }
          },
          outClose() {
              this.outSearchs.splice(this.outSearchs.length-1,1)
          }
      },
      created() {
          this.setConditions();
          // console.log(this.props, 6666);
      },
      watch:{
          outBtn(newVal,oldVal) {
              this.show = newVal==this.$config.BTNS.SEARCH
          },
      },
      components:{SearchListPopUp}
  }
</script>

<style lang="less" scoped>
  /deep/.el-dialog__header{
    padding: 10px;
    background: #d51900;
  }
  /deep/.el-dialog__headerbtn{
    top:10px;
    right:10px;
    i{
      color: white !important;
    }
  }
  /deep/.el-dialog__title{
    color: white;
    font-size: 14px;
    font-weight: bold;
  }

  /deep/.el-dialog__body{
    padding: 10px 20px;
  }

  .el-row{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

</style>
